<template>
  <div>
    <nav-bar>
      <div slot="center">异常</div>
    </nav-bar>
    <van-nav-bar
      class="app-nav-bar"
      title="状况列表"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="list-container">
      <div class="m-info">
        <span class="in-name">设备名称:{{ params.name }}</span>
        <span class="in-code">设备编号:{{ params.code }}</span>
      </div>
      <div class="m-grid">
        <table border="0" cellPadding="0" cellspacing="0">
          <thead>
            <tr>
              <th>故障描述</th>
              <th>呼叫时间</th>
              <th>处理历时</th>
              <th>维修人员</th>
              <th>目前状态</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-on:click="toUnDetail(list)"
              v-for="(list, index) in listInfo"
              :key="index"
            >
              <td>{{ list.CATEGORY }}</td>
              <td>{{ list.TOUCHTIME }}</td>
              <td>{{ list.TOTLETIME }}</td>
              <td>{{ list.F_REALNAME }}</td>

              <td>
                <button
                  v-if="list.STATUS === 'END'"
                  style="
                    background-color: #81d3f8;
                    border: none;
                    padding: 3px 6px;
                    border-radius: 2px;
                  "
                >
                  已完成
                </button>
                <button
                  v-if="list.STATUS === 'START'"
                  style="
                    background-color: #81d3f8;
                    border: none;
                    padding: 3px 6px;
                    border-radius: 2px;
                  "
                >
                  维修中
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { getUnusualInfoList } from "../../api/unusual";
import NavBar from "../../components/NavBar.vue";
export default {
  name: "unInfolist",
  data() {
    return {
      category: "",
      params: this.$route.params,
      listInfo: [],
    };
  },
  components: {
    NavBar,
  },
  methods: {
    onClickLeft() {
      this.$router.push(
        "/unlist/" + this.params.routeID + "/" + this.params.timeId
      );
    },
    toUnDetail(data) {
      this.$router.push({
        name: "un-detail",
        params: {
          data: data,
          routeID: this.params.routeID,
          timeId: this.params.timeId,
        },
      });
    },
    getUnInfoList() {
      const params = {
        name: this.params.name,
        category: this.params.category,
      };
      getUnusualInfoList(params)
        .then((res) => {
          console.log(res);
          this.listInfo = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getUnInfoList();
  },
};
</script>

<style scoped lang="less">
.list-container {
  margin-top: 3.8rem;
  .m-info {
    color: #646566;
    margin-top: 1.8rem;
    font-size: 0.4266rem;
    margin-bottom: 20px;
    .in-name {
      padding-left: 20px;
    }
    .in-code {
      text-align: right;
      float: right;
      padding-right: 20px;
    }
  }
  .m-grid {
    margin-top: 0.5333rem;
    table {
      width: 100%;
      border-right: 1px solid #7f7f7f;
      border-bottom: 1px solid #7f7f7f;
    }
    table tr th {
      font-weight: 300;
      padding: 0.17rem 0.1rem;
      font-size: 0.4rem;
      color: #646566;
      border-left: 1px solid #7f7f7f;
      border-top: 1px solid #7f7f7f;
    }
    table tr td {
      padding: 5px 0;
      text-align: center;
      font-size: 0.373333rem;
      color: #646566;
      border-left: 1px solid #7f7f7f;
      border-top: 1px solid #7f7f7f;
    }
  }
}
</style>
